<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    form {
      border: 1px solid #ddd;
      width: 300px;
      padding: 0 20px;
    }
    input {
      outline: none;
    }
    input {
      border: none;
      border-bottom: 1px solid #ddd;
      width: 100%;
      padding: 10px 0;
    }
    input[type="submit"] {
      margin-bottom: 20px;
      margin-top: 20px;
    }
    .form-group {
      position: relative;
    }
    span.error {
      position: absolute;
      left: 20px;
      top: 30px;
      background: rgba(238, 22, 22, 0.6);
      z-index: 1;
      color: #fff;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <form action="">
    <div class="form-group">
      <input type="text" placeholder="昵称" name="nickname">
    </div>
    <div class="form-group">
      <input type="text" placeholder="邮箱" name="email">
    </div>
    <div class="form-group">
      <input type="text" placeholder="密码" name="password">
    </div>
    <div class="form-group">
      <input type="text" placeholder="确认密码" name="repassword">
    </div>
    <div class="form-group">
      <input type="submit">
    </div>

  </form>

  <script src="../libs/jquery-1.12.4.js"></script>
  <script src="./jquery-validation-1.14.0/dist/jquery.validate.js"></script>
  <script src="./methods.js"></script>
  <script>
    $(function () {
      $('form').validate({
        submitHandler: function () {
          $.ajax({
            url: 'http://localhost/validate/register.php',
            data: $('form').serialize(),
            type: 'POST',
            success: function (data) {
              alert(data)
            }
          })
        },
        errorElement: 'span',
        rules: {
          nickname: {
            required: true,
            rangelength: [2, 6],
            remote: 'http://localhost/validate/checkNickname.php'
          },
          email: {
            required: true,
            email: true,
            remote: 'http://localhost/validate/checkEmail.php'

          },
          password: {
            required: true,
            isPassword: true
          },
          repassword: {
            required: true,
            equalTo: '[name="password"]'
          }
        },
        messages: {
          nickname: {
            required: "请输入昵称",
            rangelength: "昵称的格式为2-6位",
            remote: '用户名已存在'
          },
          email: {
            required: '请输入邮箱',
            email: "请输入正确的邮箱格式",
            remote: "邮箱已存在"
          },
          password: {
            required: '请输入密码',
            isPassword: '密码格式输入错误'
          },
          repassword: {
            required: '请再次输入密码',
            equalTo: '两次输入的密码不一致'
          }
        }
      })
    })
  
  </script>
</body>
</html>